﻿@{
    Layout = "_Layout";
    ViewData["Title"] = "记录";
}

<el-container>
    <avue-crud :data="tableData" :option="option" :permission="hasPermission" :page.sync="pageOption" :table-loading="loading"
               v-on:refresh-change="refreshChange"
               v-on:row-save="handleRowSave"
               v-on:row-update="handleRowUpdate"
               v-on:row-del="handleRowDel"
               v-on:search-change="searchChange"
               v-on:search-reset="resetChange"
               :cell-style="cellStyle"
               v-on:on-load="onLoadData">
        @*<template slot="avatar" slot-scope="scope">
        <el-avatar shape="circle" :src="scope.row.avatar">{{scope.row.account}}</el-avatar>
        </template> *@
        
        <template slot="sumamount" slot-scope="scope">
            <div>{{scope.row.amount,scope.row.lots|sumamountFilter}}</div>
        </template>
        
        <template slot="record" slot-scope="scope">
            <modify-record :data="scope.row"></modify-record>
        </template>
    </avue-crud>
</el-container>

@section Scripts {
    <script>
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {

                    name: "Record",
                    pageUrl: `/Record/pages`,
                    addUrl: `/Record/add`,
                    editUrl: `/Record/update`,
                    deleteUrl: `/Record/delete`,

                    option: {
                        searchShowBtn: Permissions.avePermission(`Record:searchBtn`),
                        refreshBtn: Permissions.avePermission(`Record:searchBtn`),
                        menuWidth: '350',
                        rowKey: 'id',
                        searchShow: false,
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            {
                                label:  `${this.i18n.t('类别')}`, prop: "categoryId", hide: false, showColumn: false,search: true, defaultExpandAll: true,
                                type: "tree", dicUrl: `/Record/category`, dicFlag:true,
                                showAllLevels: false, emitPath: false, checkStrictly: true,
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],
                             },
                            { prop: "recordTime", label: `${this.i18n.t('操作时间')}`, type: "date", valueFormat: 'yyyy-MM-dd', format: 'yyyy-MM-dd', slot: true, search: true, hide: false, width: '180', clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "purchase", label:  `${this.i18n.t('买入/卖出')}`, search: true, hide: false, value: 1, type: "select", button: true, dicData: [{ label: `买入`, value: 1, }, { label: `卖出`, value: 2, }], width: '80', rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "amount", label:  `${this.i18n.t('金额')}`, slot: true, search: false, hide: false, width: '90', clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "lots", label:  `${this.i18n.t('股数')}`, slot: true, search: false, hide: false, width: '90', clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                             { prop: "sumamount", label: `${this.i18n.t('总金额')}`, slot: false, search: false,hide: false, display: false, clearable: true},
                            { prop: "sort", label:  `${this.i18n.t('排序')}`, search: false, hide: false, type: "number", value:10,step:10, min:10,max:20000, },
                            { prop: "remark", label: `${this.i18n.t('note')}`, type: 'textarea', hide: true, showColumn: false, span: 24, rows: 2, },
                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, width: 140, align: `center` },
                        ],
                    },

                }
            },
            created() {
                this.selectRow = {};
                this.categoryLoad();
            },
            methods: {
                categoryLoad() {
                    this.$http.get(`/record/category`).then((res) => { 
                        let categoryData = res||[]; 
                        if (categoryData.length == 0) {
                            this.option.searchShowBtn = false;
                            this.option.refreshBtn = false;
                            this.option.addBtn = false;
                            this.option.menu = false;
                            this.option.columnBtn = false;
                        } 
                        else {
                            this.option.searchShowBtn = true;
                            this.option.refreshBtn = true;
                            this.option.addBtn = true;
                            this.option.menu = true;
                            this.option.columnBtn = true;
                        }
                        this.loading = false;
                    }).catch(e => {
                        console.log(e);
                    });
                },
                onLoadData(page,done){
                    this.onLoad(page,done);
                },
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 4) {
                        if (row.purchase == 1) {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
            },
            filters: {
               sumamountFilter(amount,lots) {
                    if (amount === null || amount === undefined) {
                        return '';
                    }
                    return parseInt(amount * lots, 10);
               }
            }
        });
    </script>

}